import { createRouter, createWebHistory } from 'vue-router'
import Home from '../views/Home.vue'

/**
 * 将会显示在LeftMenu上的路由
 */
const routes = [{
  path: '/',
  name: 'Home',
  component: Home,
  meta: {
    icon: 'ri-home-line',
  }
}, {
  path: '/download',
  name: 'Download',
  component: () => import('../views/Download.vue'),
  meta: {
    icon: 'ri-file-download-line',
  }
}, {
  path: '/upload',
  name: 'Upload',
  component: () => import('../views/Upload.vue'),
  meta: {
    icon: 'ri-file-upload-line',
  }
}, {
  path: '/article',
  name: 'Articles',
  component: () => import('../views/Article.vue'),
  meta: {
    icon: 'ri-article-line',
  }
}, {
  path: '/image',
  name: 'Image',
  component: () => import('../views/Image.vue'),
  meta: {
    icon: 'ri-image-line',
  }
}, {
  path: '/music',
  name: 'Music',
  component: () => import('../views/Music.vue'),
  meta: {
    icon: 'ri-music-2-line',
  }
}, {
  path: '/video',
  name: 'Video',
  component: () => import('../views/Video.vue'),
  meta: {
    icon: 'ri-movie-line',
  }
}, {
  path: '/about',
  name: 'About',
  component: () => import('../views/About.vue'),
  meta: {
    icon: 'ri-braces-line',
  }
}, {
  path: '/user',
  name: 'User',
  component: () => import('../views/User.vue'),
  meta: {
    icon: 'ri-user-line',
  }
}, {
  path: '/settings',
  name: 'Settings',
  component: () => import('../views/Settings.vue'),
  meta: {
    icon: 'ri-settings-4-line',
  }
}]

/**
 * 不显示在LeftMenu上的路由
 */
const additionalRoutes = [{
  path: '/login',
  name: 'Login',
  component: () => import('../views/Login.vue'),
  children: [{
    path: '',
    name: 'Login',
    component: () => import('../views/LoginPanel.vue'),
  }, {
    path: '/register',
    name: 'Register',
    component: () => import('../views/RegisterPanel.vue'),
  }],
  meta: {
    icon: 'ri-login-circle-line',
  }
}, {
  path: '/image/:id',
  name: 'ImageDetail',
  component: () => import('../views/ImageDetail.vue'),
}, {
  path: '/video/:id',
  name: 'VideoDetail',
  component: () => import('../views/VideoDetail.vue'),
}, {
  path: '/music/:id',
  name: 'MusicDetail',
  component: () => import('../views/MusicDetail.vue'),
}, {
  path: '/article/:id',
  name: 'ArticleDetail',
  component: () => import('../views/ArticleDetail.vue'),
}, {
  path: '/image/:id/manage',
  name: 'ImageManage',
  component: () => import('../views/ImageManage.vue'),
}, {
  path: '/music/:id/manage',
  name: 'MusicManage',
  component: () => import('../views/MusicManage.vue'),
}, {
  path: '/video/:id/manage',
  name: 'VideoManage',
  component: () => import('../views/VideoManage.vue'),
}, {
  path: '/article/:id/manage',
  name: 'ArticleManage',
  component: () => import('../views/ArticleManage.vue'),
}, {
  path: '/article/write',
  name: 'Writing',
  component: () => import('../views/ArticleWriting.vue'),
}]

const router = createRouter({
  history: createWebHistory(),
  routes: [...routes, ...additionalRoutes]
})

/**
 * 通过路由的name查询其在routes中的index
 * @param current
 * @param findValue
 * @returns {boolean}
 */
const findRouteIndex = (current, findValue) => {
  if (current.children != null) {
    if (current.children.findIndex(value => findRouteIndex(value, findValue)) !== -1) return true
  }

  return current.name === findValue.name
}

router.beforeEach((to, from, next) => {
  let fromIndex = routes.findIndex(value => findRouteIndex(value, from))
  let toIndex = routes.findIndex(value => findRouteIndex(value, to))

  if (fromIndex > toIndex) to.meta.transitionName = "slide"
  if (fromIndex < toIndex) to.meta.transitionName = "slide-down"
  if (fromIndex === toIndex || from.name == null) to.meta.transitionName = "fade"

  if (to.name != null) document.title = to.name || ""

  next()
})

export { routes, router }
export default router
